簡介

使用 {} 或 [] 這樣的寫法，是透過實字符號模式 ( Literal notation patterns )，來產生一個物件或陣列，編譯時 JavaScript 內部會自動把符號轉換成物件。此外 JSON 是 JavaScript 的子集合，也是採用符號來表示物件或陣列。

下面就讓我們用一段程式碼來比較吧！

    var cat = new Object();
    cat.name = "kitty";
    cat.getName = function() {
        return this.name;
    }
    
    // 也可以這樣寫
    
    var cat = {
        name: "kitty",
        getName: function() {
            return this.name;
        }
    };
    

相信實字模式的優點非常顯而易見，就是讓程式碼更加簡潔、更不易出錯。

簡單建立一個物件時，可以使用此方式，但此方式不適合再建立多個相同物件的方法或屬性。
另外小提醒，雖然在 JavaScript 實字模式中的物件屬性名稱可不用引號或使用單引號，但純 JSON 資料格式物件屬性名稱必須一律使用雙引號，所以建議大家還是都使用雙引號較不會出錯哦！

關於 constructor

一般物件導向的語言 ( 例如 C++ or Java )，constructor ( 建構函式 )是一個方法 ( method )存在於 class 當中。但在 JavaScript 的 function 取代了 constructor 這個設計。並不需要刻意地寫出建構函式的方法。

因為 JavaScript 在 new 時，就會去執行這個 function，因此建構函式可以用來設定物件的屬性 ( property )或呼叫方法( method )，初始化這個物件讓之後的物件能正常運作。

原型( prototypr )本身就是一個物件，同事具備 constructor 與 __ proto __，constructor 指向建構函式，而 __ proto __ 指向 Object.prototype。

實字模式操作

下面我們會用一段程式碼來示範將實字模式建立的物件轉換成 JSON 字串。

var json = {
    name: "John",
    show: function() {
        console.log( this.name );
    },
    empty: undefined,
    nothing: null
};

var jsonString = JSON.stringify(json);
console.log(jsonString);
var jsonObject = JSON.parse(jsonString);

這邊稍微對 JSON.stringify & JSON.parse 做一個基本的介紹，若想了解更多的朋友，歡迎參考我下方提供的資料哦！

JSON.stringify - 當我們要將在客戶端操作的 JavaScript 物件傳給伺服器端時，我們可以使用 JSON.stringify 來將物件序列化為一個 JSON 字串，然後將這個字串傳到伺服器端。

使用 JSON.stringify 時要注意，它會將 undefined 與 function 給省略。

JSON.parse - 我們可以把從伺服器端拿到的 JSON 字串，利用 JSON.parse 來將它解析成 JavaScript 的物件來使用。

命名空間

相信英文詞彙較少的朋友，常常會面臨到在對 function 命名時，腦海中怎麼擠都只有一個詞彙的窘境，但透過命名空間就可以解救各位英文苦手啦，我們可以透過它來區分相同方法的名稱。

以下，我們就用程式碼來做個示範吧！

    // 相同名稱的函式會被覆蓋 ( 後蓋前 )
    
    function foo() {
        console.log("a");
    }
    
    function foo() {
        console.log("b");
    }
    
    foo();

這時候就能用命名空間來做區分

    var a = {};
    a.common = {};
    a.custom = {};
    a.common.foo = function() {
        console.log("a");
    };
    a.custom.foo = function() {
        console.log("b");
    };
    
    a.common.foo(); // a
    a.custom.foo(); // b
    

這樣是不是非常方便呢？

每次到年底，都有種被專案圍剿的感覺 ( 累癱。

參考資料：

Tommy - 深入 JavaScript 核心課程
LotusYeh - Javascript-設計模式(實字與建構式)
Summer。桑莫。夏天 - JavaScript: JSON.parse and JSON.stringify
MDN - JSON.stringify()
MDN - JSON.parse()